<script setup>
    import { onBeforeMount, onBeforeUpdate, onMounted, onUpdated,onBeforeUnmount,onUnmounted, ref } from 'vue'
    let sum = ref(0)
    function sumAdd(){
        sum.value++
    }
    //创建 它们是按照顺序执行的,创建生命周期钩子可以说是被setup函数包裹的
    console.log("创建了MyStudent组件");
    //挂载
    onBeforeMount(()=>{
        console.log("MyStudent组件挂载前");
    })
    onMounted(()=>{
        console.log("MyStudent组件挂载完毕");
    })
    //更新
    onBeforeUpdate(()=>{
        console.log("MyStudent组件更新前");
    })
    onUpdated(()=>{
        console.log("MyStudent组件更新完毕");
    })
    //销毁
    onBeforeUnmount(()=>{
        console.log("MyStudent组件销毁前");
    })
    onUnmounted(()=>{
        console.log("MyStudent组件销毁完毕"
        );
    })
</script>
<template>
    <div class="student">
        <h2>sum求和是:{{ sum }}</h2>
        <button @click="sumAdd">点我sum加1</button>
    </div>
</template>
<style scoped>
.student{
    background-color: pink;
    padding: 5px;
    margin-top: 20px;
}
</style>